<template>
    <div v-if="value">
        <Modal
            :value="value"
            @input="handleInput"
            title="消息"
            :mask="false"
            class-name="vertical-center-modal"
            footer-hide
            :width="350"
        >
            <div class="notice">
                <div class="notice-title">
                    <div class="notice-left">平台公告</div>
                    <div class="notice-right">
                        <a
                            class="small-blue"
                            style="font-size:12px;color:#1177E8"
                            @click="seeMoreNotice"
                        >查看更多</a>
                    </div>
                </div>
                <div class="notice-list">
                    <ul class="news-group">
                        <li
                            v-for="(item, i) in noticeList"
                            :key="i"
                            @click="openDetail(2, item)"
                            :class="Number(item.isRead) == 0 ? '' : 'fw'"
                        >
                            <p>{{ i + 1 }}.{{ item.title }}</p>
                        </li>
                    </ul>
                </div>
                <div class="notice-title pt20">
                    <div class="notice-left">海关政策</div>
                    <div class="notice-right">
                        <a
                            href="javascript:;"
                            class="small-blue"
                            style="font-size:12px;color:#1177E8"
                            @click="seeMorePT"
                        >查看更多</a>
                    </div>
                </div>
                <div class="notice-content notice1">
                    <ul class="news-group">
                        <li
                            v-for="(item, i) in zcList"
                            :key="i"
                            @click="openDetail(1, item)"
                            :class="Number(item.isRead) == 0 ? '' : 'fw'"
                        >
                            <p>{{ i + 1 }}.{{ item.title }}</p>
                        </li>
                    </ul>
                </div>
            </div>
        </Modal>
        <div v-if="detailModal.visible">
            <MessageDetail
                v-model="detailModal.visible"
                :title="detailModal.title"
                :data="detail"
            ></MessageDetail>
        </div>
    </div>
</template>
<script>
import { queryHomeNotice } from '@/api/notice'
import { queryPolicyNotice } from '@/api/policy'
import MessageDetail from './message-detail'

export default {
    props: {
        value: {
            type: Boolean,
            default: false
        }
    },
    components: {
        MessageDetail
    },
    data () {
        return {
            noticeList: [],
            zcList: [],
            detailModal: {
                visible: false,
                title: ''
            },
            detail: {
                title: '',
                publisher: '',
                publishTime: '',
                content: ''
            }
        }
    },
    created () {
        this.allNoticeList = []
        this.allZCList = []
    },
    watch: {
        value (v) {
            v && this.queryMsg()
        }
    },
    methods: {
        handleInput (v) {
            this.$emit('input', v)
        },
        seeMoreNotice () {
            this.noticeList = this.allNoticeList.slice()
        },
        seeMorePT () {
            this.zcList = this.allZCList.slice()
        },
        openDetail (type, item) {
            item.isRead = null
            this.detail.title = item.title
            this.detail.publisher = item.publisher
            this.detail.publishTime =
                new Date(item.publishTime).toLocaleDateString() +
                ' ' +
                new Date(item.publishTime).toLocaleTimeString()
            this.detail.content = decodeURI(item.content)
            this.detailModal.visible = true
            this.detailModal.type = type === 1 ? '平台公告' : '海关政策'
        },
        queryMsg () {
            queryHomeNotice({
                pageNum: 1,
                pageSize: 20,
                valid: true
            }).then(res => {
                if (res.data.code === '0000') {
                    this.allNoticeList = res.data.data.list
                    this.noticeList = this.allNoticeList.splice(0, 5)
                }
            })
            queryPolicyNotice({
                pageNum: 1,
                pageSize: 20,
                valid: true
            }).then(res => {
                if (res.data.code === '0000') {
                    this.allZCList = res.data.data.list
                    this.zcList = this.allZCList.splice(0, 5)
                }
            })
        }
    }
}
</script>
<style lang="less">
.vertical-center-modal {
    .ivu-modal {
        position: absolute;
        right: 0;
        top: 0;
        bottom: 0;
    }
    .ivu-modal-content {
        height: 100%;
        border-radius: 0;
    }
    .ivu-modal-body {
        height: 100%;
        max-height: calc(~"100vh - 53px");
        overflow: hidden;
    }
    .notice-title {
        color: #383a4a;
        font-size: 16px;
        height: 40px;
        line-height: 20px;
        padding-bottom: 20px;
    }
    .pt20 {
        height: 60px;
        padding-top: 20px;
    }
    .notice-left {
        float: left;
    }
    .notice-right {
        float: right;
    }
    .notice-list {
        height: 200px;
        overflow: auto;
        border-bottom: 1px solid #e7e7ed;
        .fw p {
            font-weight: bold;
        }
    }
    .notice1 {
        overflow: auto;
        height: -webkit-calc(~"100vh - 380px");
    }
    .news-group {
        padding: 0px 16px 16px 0px;
        overflow-y: auto;

        li {
            line-height: 26px;
            font-size: 14px;
            color: #383a4a;
            cursor: pointer;

            p {
                &:hover {
                    color: #1177e8;
                }
            }
        }
    }
}
</style>
